<template>
  <div class="page-container">
    <page_breadcrumb :getKeyMethod="init_table_model" @change="change_table_model" pageOption />
    <ex_super_table_page v-bind="option" ref="SuperTablePage" @selection-change="e => selection = e">

    </ex_super_table_page>



  </div>
</template>
<script>
import business_function from "@/common/business_function"

import superTablePageFunction from '@/mixin/super-table-page-function';
import page_table_model_manage from '@/mixin/page_table_model_manage';

import emitOnFunction from '@/mixin/emit-on-function';

let emitKey = 'sku>sku_map'
export default {
  title: 'label_sku_map',
  mixins: [superTablePageFunction, emitOnFunction(emitKey), page_table_model_manage],
  components: {},
  data() {
    return {
      selection: [],
      option: {
        search: {
          model: [
            {
              label: "label_keyword", key: "keyword",
            },
            {
              label: "label_platform_key", key: "platformCode", type: 'select', enum: 'SkuRefPlatformEnum',
            },
            { label: "label_customer", key: "customerId", type: 'common_customer_choose', attrs: { multiple: false, }, },

          ],
        },
        action: [


        ],
        actionExtra: [

        ],

        table: {
          url: "/mms-api/sku/SkuPlatformRefRpc/selectSkuPlatformRef.json",
          model: this.init_table_model(),
        },
      },



    };
  },

  methods: {

    option_table_model() {
      return [
        { key: 'customerCode', label: 'label_customer_code', 'width': 140, },
        { key: 'skuName', label: 'label_sku_name', 'min-width': 130, 'show-overflow-tooltip': true, },
        { key: 'skuNameEn', label: 'label_sku_name_en', 'width': 130, 'show-overflow-tooltip': true, },

        { key: 'skuBarcode', label: 'label_sku_code', 'width': 120, 'show-overflow-tooltip': true, },
        { key: 'skuCode', label: 'label_sku_code_cn', 'width': 120, 'show-overflow-tooltip': true, },

        { key: 'skuOnlyCode', label: 'label_sku_only_code', 'min-width': 120, 'show-overflow-tooltip': true, },
        {
          key: 'refMap', label: 'label_map_platform', 'min-width': 180,
          render: (h, { row }) => {
            console.log(row.refMap);
            const platformGroup = row.refMap ? _.groupBy(row.refMap, 'platformCode') : []
            let list = []
            const styleText = "margin-bottom: 5px;padding-bottom: 5px;border-bottom: 1px solid gray;"
            _.forOwn(platformGroup, (v, k) => {
              list.push(<el-popover
                class="mg_r1 mg_b1"
                trigger="hover">
                <el-tag slot="reference">{k}</el-tag>
                <div class="platform_list" style="max-width:300px;">
                  {
                    k === 'ALIBABA_PO' ? v.map((it, i) => (<div style={i == v.length - 1 ? "" : styleText} >
                      <div >{this.$tt('label_platform_store')} : {it.storeCode} </div>
                      <div>{this.$tt('label_platform_product_code')} : {it.platformSkuCode}</div>
                      <div>{this.$tt('label_product_id')} : {it.platformProductCode}</div>
                      <div>{this.$tt('label_sku_info')} : {it.platformSkuName}</div>
                      <a style="color: #2ea7e0;" href={`https://detail.1688.com/offer/${it.platformProductCode}.html`} target="_blnk">{this.$tt('label_sku_link')}</a>
                    </div>)) :
                      v.map((it, i) => (<div style={i == v.length - 1 ? "" : styleText} >
                        <div >{this.$tt('label_platform_store')} : {it.storeCode} </div>
                        <div>{this.$tt('label_platform_product_code')} : {it.platformSkuCode}</div>
                      </div>))
                  }
                </div>
              </el-popover>)
            })
            if (_.isEmpty(list)) list = this.$renderText(h, null)
            return (<div>
              {list}
            </div>)
          }
        },

        // { key: 'platformSkuCode', label: '平台商品编码', 'width': 120, 'show-overflow-tooltip': true, },
        // { key: 'platformCode', label: '平台编码', 'width': 120, 'show-overflow-tooltip': true, },
        // {
        //   key: 'isOzonRef',
        //   label: '商品是否映射',
        //   'width': 100,
        //   formatter: (r, c, v, i) => this.$enumShow(v, "YesOrNoEnum"),
        // },

      ]
    },



  }
};

</script>
<style lang="less" scoped></style>
